let leftArrow = document.querySelector('.leftArrow');
let rightArrow = document.querySelector('.rightArrow');
let ul = document.querySelector('ul');
let ol = document.querySelector('ol');
let pointList = document.querySelectorAll('.pointList li');
let box = document.querySelector('.box');
let index = 0;
let lastIndex = 0;
let timer = null;
let isRun = false;

leftArrow.addEventListener('click', () => {
  if (++index === ul.childElementCount) {
    leftRun();
  } else {
    run();
  }
});

rightArrow.addEventListener('click', () => {
  if (--index === -1) {
    rightRun();
  } else {
    run();
  }
});

function leftRun() {
  ul.appendChild(ul.firstElementChild.cloneNode(true));
  ul.style.transform = `translateX(-${index}00%)`;
  index = 0;
  lastIndex = index;
  console.log(index);
  ul.addEventListener(
    'transitionend',
    () => {
      ul.style.transition = 'none';
      ul.style.transform = 'translateX(0%)';
      ul.lastElementChild.remove();

      // getComputedStyle(dom节点,伪对象)

      getComputedStyle(ul).transition;

      //将行内样式清空,启用页外样式
      ul.style.transition = '';
      index = 0;
    },
    { once: true }
  );
}
function rightRun() {
  // ul.insertBefore(ul.firstElementChild.cloneNode(true), ul.firstElementChild);

  ul.insertBefore(ul.lastElementChild.cloneNode(true), ul.firstElementChild);
  ul.style.transition = 'none';
  ul.style.transform = `translateX(-100%)`;
  getComputedStyle(ul).transition;
  ul.style.transition = '';
  ul.style.transform = 'translateX(0%)';

  ul.addEventListener(
    'transitionend',
    () => {
      ul.style.transition = 'none';
      ul.firstElementChild.remove();
      ul.style.transform = `translateX(-${ul.childElementCount - 1}00%)`;
      getComputedStyle(ul).transition;
      ul.style.transition = '';
      index = ul.childElementCount - 1;
    },
    { once: true }
  );
}

function run() {
  ul.style.transform = `translateX(-${index}00%)`;

  pointList[lastIndex].classList.remove('active');
  pointList[index].classList.add('active');
  lastIndex = index;
  console.log(index);
}
// pointList.forEach((item,index),()=>{
//   item.addEventListener("click",()=>{

//   })
// })
